<template>
  <div class="classify-wrapper">
    <router-link :to="{ name: 'Search' }">
      <div class="search">
        <van-icon name="search" />
        <span>荔枝水果9.9元</span>
      </div>
    </router-link>
    <OneTab />
    <template v-if="showContent">
      <SideBar />
      <GoodsList />
    </template>
    <van-loading color="#1989fa" vertical v-else />
  </div>
</template>

<script>
import OneTab from '@/components/OneTab.vue';
import SideBar from '@/components/SideBar.vue';
import GoodsList from '@/components/GoodsList.vue';
import { mapActions, mapMutations, mapState } from 'vuex';

export default {
  components: {
    OneTab,
    SideBar,
    GoodsList,
  },
  computed: {
    ...mapState(['showContent', 'goodsList']),
  },
  methods: {
    ...mapMutations(['resetGoodsList']),
    ...mapActions(['setGoodsList']),
  },
  //   watch: {
  //     showContent() {
  //       if (this.showContent) {
  //         this.resetGoodsList();
  //         this.setGoodsList({
  //           type: this.goodsList[0],
  //           page: 1,
  //           sortType: "all",
  //         });
  //       }
  //     },
  //   },
};
</script>

<style lang="less" scoped>
.classify-wrapper {
  width: 375px;
  .search {
    width: 355px;
    height: 44px;
    line-height: 44px;
    border-radius: 10px;
    background-color: #eee;
    text-align: center;
    font-size: 14px;
    margin: 11px auto 0;
    color: #a1a1a1;
  }
}
</style>
